<template>
	<view style="z-index: 999;">
		<!--一级分类-->
		<u-form-item :label-width="260" :required="item.required" :label="$t(item.label)" :key="item.key">
			<u-action-sheet :list="list" v-model="showActionSheet" :cancel-text="$t('取消')" @click="e => selectList(e)">
			</u-action-sheet>
			<u-input v-model="actionSheetText" :custom-style="myStyle" type="text" @click="clickActionSheet1"
				:placeholder="lang === 'ru'?districts($t(item.placeholder)):$t(item.placeholder)" disabled
				:placeholder-style="placeholderStyle" />
			<u-icon name="arrow-down-fill" style="position: absolute;right: 0;top: 64%;"></u-icon>
		</u-form-item>
		<!--二级分类-联动-->
		<u-form-item v-if="child" :required="child.required" :label="$t(child.label)" :key="child.key">
			<u-action-sheet :list="list2" v-model="show2" :cancel-text="$t('取消')" @click="e => selectList2(e)">
			</u-action-sheet>
			<u-input v-model="actionSheetText2" type="text" :custom-style="myStyle" @click="show2 = true"
				:placeholder="lang === 'ru'?districts($t(child.placeholder)):$t(child.placeholder)" disabled
				:placeholder-style="placeholderStyle" />
		</u-form-item>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: {},
				required: true
			},
			postfkfs:{
				type: [Array,Object,Number,String],
				default:''
			}
		},
		watch: {
			item: {
				handler(culVal) {
					this.item = culVal
					if ((this.item.child !== '')||(this.item.child !== undefined)||(this.item.child !== 'undefined')) {
						this.child = this.item.child
					}
					this.setDefaultValue()
					this.getList()
				}
			},
			postfkfs: {
				handler(culVal) {
					if(culVal==2){
						this.actionSheetText=this.$t('预付定金')
					}else if(culVal==1){
						this.actionSheetText=this.$t('预付全款')
					}
				},
				immediate: true,
			}
		},
		data() {
			return {
				lang: getApp().globalData.lang,
				actionSheetText: '', // actionSheet 显示的文字
				actionSheetText2: '', // actionSheet2 显示的文字
				list: [],
				list2: [],
				showActionSheet: false,
				show2: false,
				child: null,
				placeholderStyle: "text-align: left;",
				iconStyle: {
					position: 'absolute',
					right: 0,
					top: '64%'
				},
				myStyle: {
					textAlign: 'left',
					pointerEvents: "none"
				},
				pid:'',
			};
		},
		mounted() {
			if ((this.item.child !== '')||(this.item.child !== undefined)||(this.item.child !== 'undefined')) {
				this.child = this.item.child
			}
			// this.setDefaultValue()
			this.getList()
		},
		methods: {
			districts(val) {
				return val.length > 10 ? val.slice(0, 20) + "... >" : val
			},
			setDefaultValue() { // 设置默认值
				if (this.item.value.value !== '') { // 一级分类
					this.actionSheetText = this.$t(this.item.value.text)
				}
				if (this.child) { // 二级分类
					if ((this.child.value.value !== '')||(this.child.value.value !== undefined)||(this.child.value.value !== 'undefined')) {
						this.actionSheetText2 = this.$t(this.child.value.text)
						this.getList2()
					}
				}
			},
			selectList(e) {
				const key = this.item.key
				this.type=key
				this.actionSheetText = this.list[e].text
				
				this.$emit('change', key, this.list[e].id)
				// 赋值2级
				if(key=='release_transport' || key=='p_category_id'){
					this.item.child.value.pid = this.list[e].id
					this.getList2()
				}else{
					if(key.indexOf("country")!='-1'){
						this.pid=e
						this.getList3()
					}
				}
				
					
			},
			selectList2(e) {
				const key = this.child.key
				this.actionSheetText2 = this.list2[e].text
				this.$emit('change', key, this.list2[e].id)
			},
			getList() {
				const that = this
				if (!that.item.value.type) {
					return
				}
				this.$u.api.basic.getActionSheetList({
					type: that.item.value.type,
					pid: that.item.value.pid,
				}).then(res => {
					that.list = res
					//去掉货到付款逻辑 2024年4月22日 22:56:16 linxd 修改
					if (that.item.value.type === 'pay_type') {
						that.list.pop()
						that.list.forEach(sss => {
							sss.text = that.$t(sss.name)
						})
					}
					
				}).catch(err => {
				})
			},
			getList2() {
				const that = this
				this.$u.api.basic.getActionSheetList({
					type: that.child.value.type,
					pid: that.child.value.pid,
				}).then(res => {
					that.list2 = res
					that.$emit('change', that.child.value.type, that.child.value.pid,that.list2)
					
				}).catch(err => {
				})
			},
			getList3() {
				const that = this
				
				if(this.pid==0){
					var zh_city = uni.getStorageSync('zh_city')
					if(zh_city){
						that.$emit('change', that.type, that.pid,zh_city)
						return ;
					}
				}else{
					var ru_city = uni.getStorageSync('ru_city')
					if(ru_city){
						that.$emit('change', that.type, that.pid,ru_city)
						return ;
					}
				}
						
				this.$u.api.basic.getSelectCityList({
					country: that.country,
					pid: that.pid,
				}).then(res => {
					that.showMask = false;
					that.list3 = res
					
					if(that.pid==0){
						uni.setStorage({
						  key: 'zh_city',
						  data: that.list3
						})
					}else{
						uni.setStorage({
							key: 'ru_city',
							data: that.list3
						})
					}
					
					that.$emit('change', that.type, that.pid,that.list3)
					// if (that.item.value.city) {
					// 	that.mapDetails(res)
					// }
					
				}).catch(err => {
					that.showMask = false;
				})
			},
			
			
			clickActionSheet1() {
				this.showActionSheet = true
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>